import React, { Component } from 'react';
import { Text, View, StyleSheet, AsyncStorage } from 'react-native';
import PropTypes from 'prop-types';
import { SafeAreaView } from 'react-navigation';
import { connect } from 'react-redux';
import BaseStyle from '../constants/Style';
import Btn from '../components/buttons';
import DilogModal from '../components/dilogModal';

class Mine extends Component {
  static propTypes = {
    navigation: PropTypes.object,
  };
  static defaultProps = {};
  constructor(props) {
    super(props);
    this.state = {
      DilogModal: false,
    };
  }
  logOut = () => {
    const {
      navigation: { navigate },
    } = this.props;
    this.setState({
      DilogModal: true,
    });
    AsyncStorage.multiRemove(['token', 'userId']);
    toast('安全退出成功');
    navigate('LoginScreen');
  };

  render() {
    return (
      <SafeAreaView style={BaseStyle.flex} forceInset={{ top: 'never' }}>
        <DilogModal
          DilogModal={this.state.DilogModal}
          text={'确定要退出吗？'}
          leftOPtion={() => {
            this.setState({ DilogModal: false });
          }}
          rightOption={() => {
            this.logOut();
          }}
        />
        <View style={BaseStyle.container}>
          <Text>This is Acount</Text>
          <Btn
            text={'安全退出'}
            btnStyle={styles.btnStyles}
            onPress={() => {
              this.logOut();
            }}
          />
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  btnStyles: {
    marginTop: 100,
  },
});
const mapStateToProps = state => {
  const { UserInfoStore } = state;
  return {
    UserInfoStore,
  };
};

export default connect(mapStateToProps)(Mine);
